<!--查看活动-->
<template>
  <ele-modal
    title="查看活动"
    class="el-model"
    width="685px"
    :visible="visible"
    custom-class="demo-file-sort-dialog"
    @update:visible="updateVisible"
  >
    <el-card shadow="never">
      <el-table
        class="m-top10"
        max-height="273px"
        :data="tableData"
        ref="table"
        tooltip-effect="dark"
        border
        stripe>
        <el-table-column  label="活动名称" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.activityName}}</div>
          </template>
        </el-table-column>
        <el-table-column label="关联创作" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.videoMaterial}}</div>
          </template>
        </el-table-column>T
        <el-table-column label="活动类型" align="center">
          <template slot-scope="scope">
            <div v-show="scope.row.activityType==1">视频快推</div>
            <div v-show="scope.row.activityType==2">幸运大转盘</div>
            <div v-show="scope.row.activityType==3">幸运九宫格</div>
            <div v-show="scope.row.activityType==4">卡券活动</div>
            <div v-show="scope.row.activityType==5">爆客机设备</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.createTime}}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </ele-modal>
</template>

<script>
  import { merchantId } from '@/api/merchantAccount';
  export default {
    name: "prize",
    props:{
      visible:Boolean,
      dataInfo:Object      // 修改回显的数据
    },
    data() {
      return {
        // 上传背景图片url
        fileList:[],
        // 背景图
        imageUrl: '',
        list:[],
        tableData: []
      }
    },
    methods:{
      show() {
        console.log("进入查看活动=========",this.dataInfo)
        /* 获取角色数据 */
        merchantId(this.dataInfo.id)
          .then((list) => {
            this.tableData = list.data
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      uploadByWxhgz(file, fileList) {
        if (fileList.length > 1) {
          fileList.splice(0, 1);
        }
        console.log("fileList",fileList)
        // 执行其他操作
      },
      /* 上传 */
      onUpload(file) {
        this.fileList.push(file)
        console.log('this.fileList',this.fileList)
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log('this.imageUrl',this.imageUrl)
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isJPG = file.type;
        const isLt2M = file.size / 1024 / 1024 < 2;

        const extension1 = file.type === "image/jpg";
        const extension2 = file.type === "image/jpeg";
        const extension3 = file.type === "image/png";
        if (!extension1 && !extension2 && !extension3) {
          this.$message.error("请上传jpg 、png、jpeg 类型图片!");
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
        this.tableData=[]
      },
      // 增加行
      // 大转盘最多添加6个 九宫格8个
      addRow () {
        if(this.tableData.length >= 6){
          this.$message.warning("大转盘最多添加6个奖品")
          return
        }
        var list = {
          prizeName : '',
          prizePicture : '',
          quantity: '',
          winningPercentage: '',
          medianFrequency: ''
        }

          /*prizeName: this.prizeName,
          prizePicture: this.prizePicture,
          quantity: this.quantity,
          winningPercentage: this.winningPercentage,
          medianFrequency: this.medianFrequency}*/
        this.tableData.unshift(list)
        console.log('tableData---------add',this.tableData)
      },
      // 删除方法
      // 删除选中行
      deleteRow(index, rows) {
        rows.splice(index, 1);
        console.log('tableData---------del',this.tableData)
      },
    //  确认提交
      confirm(){
        console.log('确认提交',this.tableData)
      }
    }
  }
</script>

<style scoped lang="less">
  .fit-title{
    color: #333333;
    font-size: 16px;
    margin:0px 2px;
  }
  .tj-class{
    margin: 30px 10px 0;
  }
  .avatar-uploader{
    margin: 0;
    padding: 0;
    outline: none;

    /* 修改 start*/
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    /*end*/
    width: 88px;
    height: 88px;
  }
  /*  ‘背景图’上传 start */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #D9D9D9;
    text-align: center;
    i{
      font-size: 28px;
    }
    div{
      padding-top: 3px;
    }
  }
  .avatar {
    width: 90px;
    height: 90px;
    display: block;
  }
/*  end*/
</style>
